<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
    body{
        margin: 0;
    }
   .notice-bar {
        width: 100%;
        height: 50px;
        color: #3a3a3a;
        background-color: white;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;
    }
    .label {
        padding: 0 20px;
        height: 21px;
        font-size: 14px;
        border-right: 1px solid #d8d8d8;
        align-items: center;
    }

    .scrollbox {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;
        overflow: hidden;
    }

    .infolist {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    .rise {
        transition: all 0.5s ease;
        transform: translateY(-30px)
    }

    .info_item{
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding-left: 20px;
    }
</style>
<body>
    <div id="demo" class="notice-bar">
        <div class="label">通告</div>
        <div class="scrollbox">
            <div class="infolist" :class="{rise:animate}">
                <div class="info_item" v-for="(item,index) in infoArr">{{item.desc}}</div>
            </div>
        </div>
    </div> 
</body>
<script>
     new Vue({
        el:'#demo',
        data() {
            return {
                animate: false,
                infoArr: [
                    {desc: "我猜猜你是谁"},
                    {desc: "你怎么不说话"},
                    {desc: "滚啊,我很烦"},
                    {desc: "半夜睡不着觉"},
                    {desc: "凌晨两点半"}
                ]
            };
        },
        created: function () {
            setInterval(this.init, 2000);
        },
        methods: {
            init: function () {
                this.animate = true;
                setTimeout(() => {
                    this.infoArr.push(this.infoArr[0]);
                    this.infoArr.shift();
                    this.animate = false;
                }, 500);
            }
        }
    });
</script>
</html>
